define([
  'text!../../tmpl/lists/menuitem.html',
  'backbone',
  'underscore',
  'jquery',
  '../tasks/index',
  '../../collection/tasks'
], function(tmpl, Backbone, _, $, TaskIndexView, Tasks) {
  var ListMenuItemView = Backbone.View.extend({
    tagName: 'li',
    className: 'list-menu-item',
    template: _.template(tmpl),
    events: {
      'click': 'open'
    },

    initialize: function() {
      this.model.on('change', this.render, this);
      this.model.on('destory', this.remove, this);
      this.model.on('select', this.open, this);
    },

    render: function() {
      var $el = $(this.el);
      $el.data('listId', this.model.get('id'));
      $el.html(this.template(this.model.toJSON()));
      return this;
    },
    open: function() {
      var self = this;
      if (baker211b.views.activeListMenuItem) {
        baker211b.views.activeListMenuItem.$el.removeClass('active');
      }
      baker211b.views.activeListMenuItem = this;
      this.$el.addClass('active');

      if (baker211b.views.tasksIndexView) {
        baker211b.views.tasksIndexView.remove();
      }

      baker211b.views.tasksIndexView = new TaskIndexView({ collection: new Tasks() , model: this.model });
      baker211b.views.app.$el.find('#tasks-container').html(baker211b.views.tasksIndexView.render().el);
      baker211b.routes.navigate('lists/' + this.model.get('id'));
      return false;
    }
  })

  return ListMenuItemView;
})